<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据应用-数据对比历史-数据字段差异</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../plugins/codemirror/codemirror.css">
    <link rel="stylesheet" href="../../plugins/codemirror/theme/darcula.css">
    <link rel="stylesheet" href="../../plugins/codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">
<!--顶部条-->
<div style="padding: 0 7px 15px 7px" class="clearfix">
    <!--搜索输入框组-->
    <div class="clearfix">
        <div class="input-group pull-left" style="width: 50%">
            <input id="keyword" class="form-control" type="search" placeholder="数据字段">
            <div class="input-group-append">
                <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
            </div>
        </div>
    </div>
    <!--过滤-->
    <div style="margin-top: 10px;">
        <div class="icheck-danger d-inline">
            <input id="diff" type="radio" name="filter">
            <label for="diff" class="text-danger">只看不同</label>
        </div>
        <div class="icheck-info d-inline" style="margin-left: 10px">
            <input id="same" type="radio" name="filter">
            <label for="same" class="text-info">只看相同</label>
        </div>
        <div class="icheck-default d-inline" style="margin-left: 10px">
            <input id="ignore" type="radio" name="filter" checked>
            <label for="ignore" class="">所有数据</label>
        </div>
    </div>
</div>
<!--数据展示-->
<div class="container-fluid">
    <table id="table" class="table table-sm table-hover table-bordered">
        <thead><tr>
            <th rowspan="2" style="vertical-align: middle;text-align: center;">#</th>
            <th rowspan="2" style="vertical-align: middle;text-align: center;width: 4em;">级别</th>
            <th id="dataTableOne" colspan="5" style="text-align: center;"></th>
            <th rowspan="2" style="vertical-align: middle;text-align: center;width: 6em;">操作</th>
            <th id="dataTableTwo" colspan="5" style="text-align: center;"></th>
        </tr><tr>
            <th>名称</th>
            <th>类型</th>
            <th>可否为空</th>
            <th>是否自增</th>
            <th>注释</th>
            <th>名称</th>
            <th>类型</th>
            <th>可否为空</th>
            <th>是否自增</th>
            <th>注释</th>
        </tr></thead>
        <tbody><tr>
            <td>{{index}}</td>
            <td title="{{difference}}">
                <span class="badge {{levelClass}}">
                    <i class="fa fa-commenting-o"></i> {{level}}
                </span>
            </td>
            <td>{{columnOne}}</td>
            <td>{{typeOne}}</td>
            <td><span class="badge {{nullableOneClass}}">{{nullableOne}}</span></td>
            <td><span class="badge {{incrementOneClass}}">{{incrementOne}}</span></td>
            <td>{{commentOne}}</td>
            <td style="text-align: center; vertical-align: middle">
                <button class="btn btn-xs btn-outline-primary btn-left" data-id="{{id}}" style="width: 3em" title="同步至左侧" {{disabled}}>
                    <i class="fa fa-chevron-left"></i>
                </button>
                <button class="btn btn-xs btn-outline-primary btn-right" data-id="{{id}}" style="width: 3em" title="同步至右侧" {{disabled}}>
                    <i class="fa fa-chevron-right"></i>
                </button>
            </td>
            <td>{{columnTwo}}</td>
            <td>{{typeTwo}}</td>
            <td><span class="badge {{nullableTwoClass}}">{{nullableTwo}}</span></td>
            <td><span class="badge {{incrementTwoClass}}">{{incrementTwo}}</span></td>
            <td>{{commentTwo}}</td>
        </tr>
        </tbody>
    </table>
</div>
<!--加载更多-->
<div id="load-more" class="text-sm-center text-primary" style="display: none;">
    <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
</div>
<!--正在加载-->
<div id="loading" class="text-sm-center text-gray" style="display: none;">
    <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
</div>
<!--全部加载-->
<div id="load-all" class="text-sm-center text-success" style="display: none;">
    <i class="fa fa-info-circle"></i> 已加载全部数据
</div>
<!--加载失败-->
<div id="load-error" class="text-sm-center text-danger" style="display: none;">
    <i class="fa fa-exclamation-triangle"></i> 加载失败
</div>
<!--SQL-->
<div id="sql-panel" class="side-panel right width1000 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <textarea id="sql-area"></textarea>
        <div class="bg-white" style="margin-top: 20px">
            <button id="sql-cancel" class="btn btn-default"><i class="fa fa-times"></i> 关闭</button>
            <button id="sql-copy" class="btn btn-info"><i class="fa fa-copy"></i> 复制</button>
            <div class="select2-info pull-right" style="width: 150px; display: inline-block">
                <select id="sql-case-type" class="select2" data-dropdown-css-class="select2-info" style="width: 100%;"></select>
            </div>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../../plugins/codemirror/codemirror.js"></script>
<script src="../../plugins/codemirror/mode/sql/sql.js"></script>
<script src="../../plugins/codemirror/addon/hint/show-hint.js"></script>
<script src="../../plugins/codemirror/addon/hint/sql-hint.js"></script>
<script src="../../plugins/clipboard/clipboard.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var select2SqlDataSourceCaseCtrl = new Select2Ctrl("#sql-case-type", Url.dataService.dataSourceCasePage, "name", "value", "select2");
    select2SqlDataSourceCaseCtrl.init();

    var sqlArea = CodeMirror.fromTextArea(document.getElementById("sql-area"), {
        mode: "text/x-sql",
        theme: "darcula"
    });
    sqlArea.setSize("auto", "auto");

    var params = Utils.getParams(location.href);
    var dataCompareHistoryId = params["id"];
    var dataSourceOneId = params["dsId1"];
    var dataSourceTwoId = params["dsId2"];
    var dataSourceOneName = params["dsName1"];
    var dataSourceTwoName = params["dsName2"];
    var dataSourceOneTypeName = params["dsTypeName1"];
    var dataSourceTwoTypeName = params["dsTypeName2"];
    var dataSourceOneTypeValue = params["dsTypeValue1"];
    var dataSourceTwoTypeValue = params["dsTypeValue2"];
    var dataTableOne = params["table1"];
    var dataTableTwo = params["table2"];
    var dataSourceOneTypeClass = dataSourceOneTypeName === "MYSQL" ? "bg-info" : "bg-warning";
    var dataSourceTwoTypeClass = dataSourceTwoTypeName === "MYSQL" ? "bg-info" : "bg-warning";
    var dataSourceOneCase = dataSourceOneTypeName === "MYSQL" ? "LOWER_CASE" : "UPPER_CASE";
    var dataSourceTwoCase = dataSourceTwoTypeName === "MYSQL" ? "LOWER_CASE" : "UPPER_CASE";

    var tableCtrl = new TableCtrl(
        Url.dataService.dataCompareHistoryColumn,
        Url.unsupported, Url.unsupported, Url.unsupported, Url.unsupported,
        function (template, record, index) {
            var levelClass = "bg-warning";
            var disabled = "";
            switch (record.level) {
                case "SAME": levelClass = "bg-success"; disabled=""; break;
                case "DIFF": levelClass = "bg-warning"; disabled=""; break;
                case "MISS": levelClass = "bg-danger"; disabled=""; break;
                default: levelClass = "bg-warning";  disabled="";break;
            }

            var nullableOneClass = "bg-danger";
            var nullableOne = "非空";
            if (record.nullableOne) {
                nullableOneClass = "bg-success";
                nullableOne = "";
            }

            var incrementOneClass = "bg-default";
            var incrementOne = "";
            if (record.incrementOne) {
                incrementOneClass = "bg-success";
                incrementOne = "自增";
            }

            var nullableTwoClass = "bg-danger";
            var nullableTwo = "非空";
            if (record.nullableTwo) {
                nullableTwoClass = "bg-success";
                nullableTwo = "";
            }

            var incrementTwoClass = "bg-default";
            var incrementTwo = "";
            if (record.incrementTwo) {
                incrementTwoClass = "bg-success";
                incrementTwo = "自增";
            }

            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{id}}", "gm"), record.id)
                .replace(new RegExp("{{levelClass}}", "gm"), levelClass)
                .replace(new RegExp("{{level}}", "gm"), record.levelValue)
                .replace(new RegExp("{{difference}}", "gm"), record.difference)
                .replace(new RegExp("{{tableOne}}", "gm"), dataTableOne)
                .replace(new RegExp("{{columnOne}}", "gm"), record.columnOne ? record.columnOne : "")
                .replace(new RegExp("{{typeOne}}", "gm"), record.typeOne ? record.typeOne : "")
                .replace(new RegExp("{{nullableOne}}", "gm"), nullableOne)
                .replace(new RegExp("{{nullableOneClass}}", "gm"), nullableOneClass)
                .replace(new RegExp("{{incrementOne}}", "gm"), incrementOne)
                .replace(new RegExp("{{incrementOneClass}}", "gm"), incrementOneClass)
                .replace(new RegExp("{{commentOne}}", "gm"), record.commentOne ? record.commentOne : "")
                .replace(new RegExp("{{tableTwo}}", "gm"), dataTableTwo)
                .replace(new RegExp("{{columnTwo}}", "gm"), record.columnTwo ? record.columnTwo : "")
                .replace(new RegExp("{{typeTwo}}", "gm"), record.typeTwo ? record.typeTwo : "")
                .replace(new RegExp("{{nullableTwo}}", "gm"), nullableTwo)
                .replace(new RegExp("{{nullableTwoClass}}", "gm"), nullableTwoClass)
                .replace(new RegExp("{{incrementTwo}}", "gm"), incrementTwo)
                .replace(new RegExp("{{incrementTwoClass}}", "gm"), incrementTwoClass)
                .replace(new RegExp("{{commentTwo}}", "gm"), record.commentTwo ? record.commentTwo : "")
                .replace(new RegExp("{{disabled}}", "gm"), disabled)

        },
        function () {
            return undefined;
        }
    );
    tableCtrl.extraUrlSearch = function (url) {
        if (Utils.isEmpty(dataCompareHistoryId)) {
            return undefined;
        }
        if (Utils.isEmpty(dataTableOne) && Utils.isEmpty(dataTableTwo)) {
            return undefined;
        }
        if (dataTableOne.toUpperCase() !== dataTableTwo.toUpperCase()) {
            return undefined;
        }

        url = url.replace("{id}", dataCompareHistoryId);
        url += "&table=" + encodeURIComponent(dataTableOne);
        if (Utils.notEmpty(this.keyword)) {
            url += "&colume=" + encodeURIComponent(this.keyword)
        }
        if ($("#diff").prop("checked")) {
            url += "&diff=true"
        }
        if ($("#same").prop("checked")) {
            url += "&diff=false"
        }
        return url;
    };
    tableCtrl.sqlUnchange = undefined;
    tableCtrl.sqlLower = undefined;
    tableCtrl.sqlUpper = undefined;
    tableCtrl.showSql = function() {
        $("#sql-panel").removeClass("hide");
        if (Utils.isEmpty(this.sqlUnchange)) return;
        if (Utils.isEmpty(this.sqlLower)) return;
        if (Utils.isEmpty(this.sqlUpper)) return;
        var dataSourceCase = $("#sql-case-type").val();
        if ("UNCHANGE" === dataSourceCase) {
            sqlArea.setValue(this.sqlUnchange);
        } else if ("LOWER_CASE" === dataSourceCase) {
            sqlArea.setValue(this.sqlLower);
        } else if ("UPPER_CASE" === dataSourceCase) {
            sqlArea.setValue(this.sqlUpper);
        } else {
            sqlArea.setValue(this.sqlUnchange);
        }
    };
    tableCtrl.hideSql = function() {
        this.sqlUnchange = undefined;
        this.sqlLower = undefined;
        this.sqlUpper = undefined;
        $("#sql-panel").addClass("hide");
    };
    tableCtrl.extraBind = function () {
        var self = this;

        $("#sql-cancel").click(function () {
            self.hideSql();
        });

        new ClipboardJS("#sql-copy", {
            text: function(trigger) {
                return sqlArea.getValue();
            }
        }).on('success', function(e) {
            parent.window.frameCtrl.toastr.success("复制成功");
        }).on('error', function(e) {
            parent.window.frameCtrl.toastr.error("复制失败");
        });

        $("#sql-case-type").on("select2:select", function () {
            self.showSql();
        });

        $("#table").on("click", ".btn-left", function () {
            var id = $(this).attr("data-id");
            var record = self.getById(id);
            self.sqlUnchange = record.twoToOne;
            self.sqlLower = record.twoToOneLower;
            self.sqlUpper = record.twoToOneUpper;

            $("#sql-case-type").val(dataSourceOneCase).trigger("change");

            self.showSql();
        });

        $("#table").on("click", ".btn-right", function () {
            var id = $(this).attr("data-id");
            var record = self.getById(id);
            self.sqlUnchange = record.oneToTwo;
            self.sqlLower = record.oneToTwoLower;
            self.sqlUpper = record.oneToTwoUpper;

            $("#sql-case-type").val(dataSourceTwoCase).trigger("change");

            self.showSql();
        });

        $("#diff, #same, #ignore").click(function () {
            $("#search").click();
        })
    };

    tableCtrl.getTemplate();
    tableCtrl.getRecords();
    tableCtrl.bindEvent();

    $("#dataTableOne").html("<span class='badge " + dataSourceOneTypeClass + "'>" + dataSourceOneTypeValue + "</span> " + dataSourceOneName + " - " + dataTableOne);
    $("#dataTableTwo").html("<span class='badge " + dataSourceTwoTypeClass + "'>" + dataSourceTwoTypeValue + "</span> " + dataSourceTwoName + " - " + dataTableTwo);
</script>

</body>
</html>